{extend name="layout/iframe_layout" /}

{block name="title"}登录{/block}
{block name="style"}
<style>
    /* 设置全屏背景 */
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        background: linear-gradient(135deg, #19a6de 0%, rgb(36, 84, 208) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* 卡片样式 */
    .container {
        width: 450px; /* 增加宽度以改善视觉平衡 */
        margin: 0 auto;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 12px; /* 增大圆角 */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); /* 加深阴影 */
        backdrop-filter: blur(10px); /* 毛玻璃效果 */
        padding: 2.5rem; /* 增加内边距 */
    }

    /* 标题样式 */
    h3 {
        color: #333;
        font-weight: bold;
        margin-bottom: 1.5rem;
    }

    /* 表单按钮样式 */
    .el-button--primary {
        background-color: #1e3c72;
        border-color: #1e3c72;
        transition: all 0.3s ease;
    }

    .el-button--primary:hover {
        background-color: #2a5298;
        border-color: #2a5298;
    }
</style>
{/block}

{block name="content"}
<div id="app">
    <div class="container mt-5">
        <div class="card shadow-sm p-4 rounded">
            <h3 class="text-center mb-4">账号登录</h3>
            <el-form ref="form" :model="form" label-width="80px" label-position="left" class="login-form">
                <el-form-item label="账号" required prop="account">
                    <el-input v-model="form.account" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" required prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <!-- 修改：将按钮设置为占满整行 -->
                <el-form-item>
                    <el-button type="primary" @click="saveData" icon="el-icon-key" style="width: 100%;">立即登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    account: '',
                    password: ''
                }
            };
        },
        methods: {
            saveData() {
                if (!this.form.account.trim()) {
                    this.$message.error('请输入登录账号');
                    return;
                }
                if (!this.form.password.trim()) {
                    this.$message.error('请输入登录密码');
                    return;
                }

                post('/login/login', this.form)
                    .then(res => {
                        if (res.code != 0) {
                            this.$message.error(res.msg);
                            return;
                        }
                        localStorage.setItem('token', res.data.token);
                        location.href = '/admin';
                    }).catch(error => {
                        this.$message.error('网络请求失败，请稍后重试');
                });
            },
        },
        mounted() {
        }
    });
</script>
{/block}
